<template>
  <div>reactive的适用</div>
  <h2>{{ user.name }}</h2>
  <h2>{{ user.age }}</h2>
  <h2>妻子:{{ user.wife }}</h2>
  <h2>性别:{{ user.gender }}</h2>
  <button @click="updateUser">跟新数据</button>
</template>

<script lang="ts">

import { defineComponent, reactive } from 'vue';
export default defineComponent({
  name: 'App',
  // 需求:提示用户相关信息,点击按钮,可以更新用户的相信息数据
  setup() {
    //把数据变成响应式的数据
    //返回的是一个Proxy的代理对象,被代理的目标对象就是obj
    // user现在是代理对象,obj是目标对象
    //user现在
    // const obj: any = { //为了使用obj.gender='男'的时候不出现这种错误的提示西信息才这么书写
    const obj: any = {
      name: '小米',
      age: 12,
      wife: {
        name: '小命名',
        age: 18,
        cars: ['宝马', '本茨', '奥迪']
      }
    }
    const user = reactive<any>(obj)
    console.log(user);

    // 方法
    // function updateUser\
    const updateUser = () => {
      // 直接使用目标对象的方式更新目标对象中的成员中的值,是不可能的,只能使用代理对象的方式更新数据(响应式数据)
      // obj.name = "hah"  不是响应式
      // user.name = '小胖'
      // user.wife.name = "小刚"

      // user --------->代理对象,user--------->目标对象
      //user对象或是obj对象添加一个新的属性,哪一种方式会影响界面的更新
      // obj.gender = '男'  //这种方式,界面没有更新渲染
      // user.gender = '男'   //这种方式,界面可以更新渲染,而且这个数据最终也添加到了obj中
      // user对象或obj对象中移除一个已经存在的属性,哪一个方式会影响界面的更新  
      // delete obj.age   //界面没有更新渲染,obj中确实没有了age这个数属性
      // delete user.age 界面更新渲染人了,obj中确实没有了age这个属性

      //总结:如果操作代理的对象,目标对象中的数据也会随之变化,同时如果想要在操作数据的时候,界面也要更着重新跟新渲染,那么也是
      // 操作代理对象    
      // 通过当前的代理对象找到对象中的某个属性,更改该属性中的某个数组的数据
      // user.wife.cars[1] = '马萨拉蒂'
      // 通过当前的代理对象把目标对象中的某个数组属性添加一个新的属性
      user.wife.cars[3] = '奥拓'
      
    }
    return {
      user,
      updateUser
    }
  },
});
</script>
<style>
</style>
